<template>
  <div>
    <NavBarVue>
      <template v-slot:left>
        <van-icon name="arrow-left" color="#101010" @click="retHome"></van-icon>
        <van-image
          round
          class="img_info"
          width="20"
          height="20"
          :src="author.head"
        />
        <text class="txt_info">{{ author.name }}</text>
      </template>
      <template v-slot:right>
        <van-tag
          round
          plain
          :type="is_focus"
          size="medium"
          @click="focus_click"
          >{{ focus }}</van-tag
        >

        <ShareVue> </ShareVue>
      </template>
    </NavBarVue>
    <van-swipe class="my-swipe" indicator-color="#39a9ed">
      <van-swipe-item v-for="(item, index) in images" :key="index">
        <van-image :src="item" fit="contain" class="swipe_img"></van-image>
      </van-swipe-item>
    </van-swipe>
    <div class="content">
      <div class="content_title">{{ title }}</div>
      <div v-html="md_content" class="content_con"></div>
      <div class="content_bottom">
        <div class="date">{{ time }}</div>
        <div class="icon_three">
          <van-icon
            :name="icon_name[0]"
            color="red"
            size="25"
            class="love_icon"
            @click="love_change()"
          ></van-icon>
          <van-icon
            :name="icon_name[1]"
            color="yellow"
            size="25"
            class="love_icon"
            @click="star_change()"
          ></van-icon>
        </div>
      </div>
    </div>
    <text class="comment_cnt">共{{ comment.length }}条评论</text>
    <div class="article-comments">
      <!-- 评论列表 -->
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-cell v-for="(item, index) in comment" :key="item">
          <van-image
            slot="icon"
            round
            width="30"
            height="30"
            style="margin-right: 10px"
            :src="item.headUrl"
          />
          <span style="color: #466b9d" slot="title">{{ item.name }}</span>
          <div class="label">
            <div>
              <p style="color: #363636">{{ item.content }}</p>
              <p>
                <span style="margin-right: 10px">{{ item.time }}</span>
                <!-- <van-button size="mini" type="default">回复</van-button> -->
              </p>
            </div>
            <div class="like_icon">
              <van-icon
                slot="right_icon"
                color="red"
                :name="comment_icon_name[index]"
                @click="like(index)"
              />
            </div>
          </div>
        </van-cell>
      </van-list>
      <!-- 评论列表 -->

      <!-- 发布评论 -->
      <van-cell-group class="publish-wrap">
        <van-field v-model="value" clearable placeholder="请输入评论内容">
          <template #button>
            <van-button
              round
              size="mini"
              type="primary"
              class="release_button"
              @click="send(value)"
            >
              发布
            </van-button>
          </template>
        </van-field>
      </van-cell-group>
      <!-- /发布评论 -->
    </div>
  </div>
</template>

<script>
import { Dialog, Toast } from "vant";
import NavBarVue from "../../../components/NavBar.vue";
import SwipeVue from "../../../components/Home/Swipe.vue";
import ShareVue from "../../../components/Home/Share.vue";
import CommentVue from "../../../components/Home/Comment.vue";
import axios from "axios";
// import content from "../../../assets/content.md";
const marked = require("marked");
// console.log(content)
export default {
  data() {
    return {
      focus: "关注",
      is_focus: "danger",
      images: [],
      author: {
        name: "",
        head: "",
      },
      loading: false, // 上拉加载更多的 loading
      finished: false, // 是否加载结束
      md_content: "",
      icon_name: "like-o",
      uid: "",
      pid: "",
      list: [],
      title: "",
      time: "",
      value: "",
      comment: [],
      icon_name: ["like-o", "star-o", "like-o"],
      comment_icon_name: ["like-o", "like-o", "like-o"],
    };
  },
  methods: {
    like(index) {
      if (this.comment_icon_name[index] === "like-o")
        this.comment_icon_name[index] = "like";
      else this.comment_icon_name[index] = "like-o";
    },
    // 点赞
    love_change() {
      var item = JSON.parse(localStorage.getItem("love"));
      //开始没有点赞
      if (this.icon_name[0] === "like-o") {
        var love = {
          uid: this.uid,
          pid: this.pid,
        };
        item.push(love);
        //放入点赞表中
        localStorage.setItem("love", JSON.stringify(item));
        this.icon_name[0] = "like";
        // 更新发现表
        var list = JSON.parse(localStorage.getItem("find"));
        for (var i in list) {
          if (list[i].uid == this.uid && list[i].pid == this.pid) {
            list[i].isactive = "true"; //设置为小红心
            list[i].likes++; //点赞数加1
            break;
          }
        }
        localStorage.setItem("find", JSON.stringify(list));
      } else {
        var love = [];
        //将该作品移除点赞表
        for (var i in item) {
          if (item[i].uid === this.uid && item[i].pid === this.pid) {
            continue;
          } else {
            love.push(item[i]);
          }
        }
        localStorage.setItem("love", JSON.stringify(love));
        this.icon_name[0] = "like-o"; //设置没有红心
        //更新发现表
        var list = JSON.parse(localStorage.getItem("find"));
        for (var i in list) {
          if (list[i].uid == this.uid && list[i].pid == this.pid) {
            list[i].isactive = "false"; //设置为没有红心
            list[i].likes--; //点赞数减1
            break;
          }
        }
        localStorage.setItem("find", JSON.stringify(list));
      }
    },
    //收藏
    star_change() {
      var item = JSON.parse(localStorage.getItem("collect"));
      //开始没有收藏
      if (this.icon_name[1] === "star-o") {
        var collect = {
          uid: this.uid,
          pid: this.pid,
        };
        item.push(collect);
        //放入收藏表中
        localStorage.setItem("collect", JSON.stringify(item));
        this.icon_name[1] = "star";
        Toast("收藏成功");
      } else {
        var collect = [];
        //将当前作品移除收藏表
        for (var i in item) {
          if (item[i].uid === this.uid && item[i].pid === this.pid) {
            continue;
          } else {
            collect.push(item[i]);
          }
        }
        localStorage.setItem("collect", JSON.stringify(collect));
        this.icon_name[1] = "star-o";
      }
    },
    //评论
    send(value) {
      if (value === "") Toast.fail("内容不能为空");
      else {
        var time = new Date().toLocaleString().split(" ")[0];
        var id = localStorage.getItem("uid");
        var name = localStorage.getItem("name");
        var head = localStorage.getItem("head");
        var con = {
          uid: id,
          name: name,
          headUrl: head,
          content: value,
          time: time,
          isactive: "fasle",
        };
        var list = JSON.parse(localStorage.getItem("comment"));
        for (var it in list) {
          if (this.uid === list[it].uid && this.pid === list[it].pid) {
            this.comment = list[it].list;
            console.log(it);
            list[it].list.unshift(con);
            localStorage.setItem("comment", JSON.stringify(list));
            Toast.success("评论成功！");
            this.value = "";
            return;
          }
        }
      }
    },
    retHome() {
      this.$router.go(-1);
    },
    //关注
    focus_click() {
      var friend = [];
      friend = JSON.parse(localStorage.getItem("friend"));
      if (this.focus === "关注") {
        this.focus = "已关注";
        this.is_focus = "primary";
        console.log(this.author.name);
        var user = {
          name: this.author.name,
          pid: this.uid,
          headUrl: this.author.head,
        };
        friend.push(user);
        console.log(friend);
        localStorage.setItem("friend", JSON.stringify(friend));
      } else {
        Dialog.confirm({
          message: "确认不再关注?",
        }).then(() => {
          var item = [];
          for (var i in friend) {
            if (friend[i].pid === this.uid) {
              continue;
            } else {
              item.push(friend[i]);
            }
          }
          localStorage.setItem("friend", JSON.stringify(item));
          this.focus = "关注";
          this.is_focus = "danger";
        });
      }
    },
    //获取用户作品数据
    getDetail() {
      axios.get("/js/production.json").then((res) => {
        var list = res.data.production;
        if (localStorage.getItem("publish")) {
          var item = JSON.parse(localStorage.getItem("publish"));
          console.log(item);
          this.md_content = marked(item.title);
          this.images = item.imageList;
          this.time = item.time.split(" ")[0];
        }
        if (localStorage.getItem("pub")) {
          var item = JSON.parse(localStorage.getItem("pub"));
          for (var i in item) {
            list.unshift(item[i]);
          }
        }
        for (var it in list) {
          //判断是否是当前作品
          if (this.uid == list[it].uid && this.pid == list[it].pid) {
            this.list = list[it];
            this.images = this.list.imageList;
            this.md_content = marked(this.list.content);
            this.title = this.list.title;
            this.time = this.list.time;
            console.log(this.list);
            break;
          }
        }
      });
    },
    //获取评论
    getComment() {
      var list = JSON.parse(localStorage.getItem("comment"));
      for (var it in list) {
        if (this.uid === list[it].uid && this.pid === list[it].pid) {
          this.comment = list[it].list;
          return;
        }
      }
    },
    onLoad() {
      // 异步更新数据
      setTimeout(() => {
        for (let i = 0; i < 10; i++) {
          // this.list.push(this.list.length + 1);
          this.comment_icon_name.push("like-o");
        }
        // 加载状态结束
        this.loading = false;

        // 数据全部加载完成
        if (this.list.length >= 40) {
          this.finished = true;
        }
      }, 500);
    },
    //最上面 作者信息
    getHead() {
      axios.get("/js/user.json").then((res) => {
        var item = res.data.user.datalist;
        for (var i in item) {
          if (item[i].uid === this.uid) {
            this.author.name = item[i].name;
            this.author.head = item[i].headUrl;
            return;
          }
        }
      });
    },
  },
  components: {
    NavBarVue,
    SwipeVue,
    ShareVue,
    CommentVue,
    [Dialog.Component.name]: Dialog.Component,
  },
  created() {
    this.uid = this.$route.params.uid;
    this.pid = this.$route.params.pid;
    this.getDetail();
    this.getComment();
    this.getHead();
    var friend = JSON.parse(localStorage.getItem("friend"));
    for (var i in friend) {
      if (friend[i].pid === this.uid) {
        this.focus = "已关注";
      }
    }
    // console.log(this.uid);
  },
  mounted() {
    var item = JSON.parse(localStorage.getItem("love"));
    for (var i in item) {
      if (item[i].uid === this.uid && item[i].pid === this.pid) {
        this.icon_name[0] = "like";
        break;
      }
    }
    var item1 = JSON.parse(localStorage.getItem("collect"));
    for (var i in item1) {
      if (item1[i].uid === this.uid && item1[i].pid === this.pid) {
        this.icon_name[1] = "star";
        break;
      }
    }
  },
};
</script>

<style scoped>
.img_info {
  margin-left: 7px;
}
.txt_info {
  margin-left: 7px;
}
.content {
  padding: 15px;
}
.content_title {
  font-size: large;
  font-weight: 50px;
}
.content_con {
  margin-top: 10px;
}
.content_bottom {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.love_icon {
  margin-left: 10px;
}
.date {
  font-size: 10px;
  color: darkgrey;
}
.publish-wrap {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
}

.van-list {
  margin-bottom: 45px;
}
.comment_cnt {
  margin-left: 10px;
  font-size: 12px;
}
.article-comments {
  margin-bottom: 50px;
}
.label {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.like_icon {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.publish-wrap {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
}

.van-list {
  margin-bottom: 45px;
}
.release_button {
  width: 40px;
}
.my-swipe {
  height: 1295;
  background-color: #fff;
}
.my-swipe .van-swipe-item {
  color: #39a9ed;
  font-size: 20px;
  /* height: 150px; */
  text-align: center;
  margin: auto 0;
  background-color: #fff;
}
.swipe_img {
  /* height: 100px; */
  margin-top: 60px;
}
</style>